
<template>
  <base-page-view class-name="page-container">
    <view class="settleDetails-tab">
      <view v-for="(tab,index) in tabTit" :key="index" class="tab-item" :class="{actives:active==index}" @click="toggle(index)">
        {{ tab }}
        <view v-if="active===index" class="borderBottom">
        </view>
      </view>
    </view>
    <view v-if="listData.length>0" class="content">
      <view v-if="active !== 2" class="headl">
        <view>{{ timeTitle }}</view>
        <view>{{ active===0?'合计收益':'扣除收益' }}：¥{{ active===0 ? totalCommission : '-'+totalCommission | formatMoney(4) }}</view>
      </view>
      <view v-else class="headl">
        说明：此部分订单无收益产生。
      </view>
      <view v-for="(list,index) in listData" :key="index" class="list">
        <view class="goods">
          <image v-if="list.platform==='ALI'" src="/static/images/commission/tb.png" class="paltformIcon" />
          <image v-if="list.platform==='JD'" src="/static/images/commission/jd.png" class="paltformIcon" />
          <image v-if="list.platform==='PDD'" src="/static/images/commission/pdd.png" class="paltformIcon" />
          <image v-if="list.platform==='VOP'" src="/static/images/commission/vop.png" class="paltformIcon" />
          <view class="title" :class="list.settleStatus!='TRADE_INVALID'?'':'title_pri_del'">{{ list.title||'' }}</view>
        </view>
        <view class="totalEarnings">
          <view>订单金额：¥ {{ list.payment | formatMoney }}</view>
          <!-- <view class="redPrice">
            收益：¥ {{ active===0?list.prepareCommission:'-'+ list.prepareCommission| formatMoney(4) }}
          </view> -->
          <view class="redPrice">
            收益：¥ {{ (active===1 && list.prepareCommission > 0) ? '-' : '' }}{{ list.prepareCommission | formatMoney(4) }}
          </view>
        </view>
        <view class="c_border"></view>
        <view class="order">
          <!-- <view class="details">
            <view>订单编号：</view>
            <view>{{ list.tid }}</view>
          </view> -->
          <view class="details">
            <view>付款时间:</view>
            <view>{{ list.tradePayTime }}</view>
          </view>
          <view v-if="active === 2" class="details">
            <view>说明:</view>
            <view>{{ list.remark }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="searchBtn" @click="searchPopup">筛选</view>
    <base-popup :show="pShow" :show-close="false" type="top" :has-scroll="true" :mask="true" :mask-close="true" @close="closePopup">
      <view class="propClass">
        <view class="p-30">
          <view>时间筛选</view>
          <view class="search">
            <view v-for="(tit,index) in searchTit" :key="index" class="searchTit" :class="{active2:active2==index}" @click="chooseTimeTab(index)">{{ tit }}</view>
          </view>
          <view class="pickerTit">选择时间</view>
          <view class="pickerView">
            <view class="pickerTime" :class="{aniPicker:startAniPicker}">
              <picker mode="date" :value="startTimeP" :start="startDate" :end="endDate" fields="month" @change="bindstartDateChange">
                <view class="uni-input">{{ startTimeP }}</view>
              </picker>
            </view>
            <view class="pickerTime" :class="{aniPicker:endAniPicker}">
              <picker mode="date" :value="endTimeP" :start="startDate" :end="endDate" fields="month" @change="bindendDateChange">
                <view class="uni-input">{{ endTimeP }}</view>
              </picker>
            </view>
          </view>
        </view>
        <view class="chooseButton">
          <view class="resetBtn sureBtn" @click="resetBtn">重置</view>
          <view class="sureBtn" @click="sureBtn">确定</view>
        </view>
      </view>
    </base-popup>
    <view v-if="listData.length<1" class="empty_view">
      <image src="/static/images/commission/commission-empty.png" class="empty_img" />
      <view class="tit">暂无任何内容</view>
    </view>
    <view v-if="nomore&&listData.length>0" class="nomore">暂无更多数据~</view>
  </base-page-view>
</template>

<script>
import './settleDetails.scss'
import { filters,formatDate } from '@/utils/tools.js'
export default {
  components: {
  },
  data() {
    return {
      tabTit: ['收益明细', '售后扣除', '其他'],
      active: 0,
      settleStatus: 'TRADE_DONE_SETTLE',
      pageSize: 10,
      pageNo: 1,
      startTime: '',
      endTime: '',
      listData: [],
      month: '',
      totalCommission: '',
      nomore: false,
      pShow: false,
      searchTit: ['全部', '本月', '上月', '最近三个月', '最近6个月', '最近1年'],
      active2: 'no',
      startTimeP: '开始时间',
      endTimeP: '结束时间',
      startTimeS: '',
      endTimeS: '',
      startAniPicker: false,
      endAniPicker: false,
      timeTitle: '全部',
      dailyDate:'',//日期
      uniqueNo:'',//收益唯一标识
    }
  },
  computed: {
    startDate() {
      return this.getDate('start')
    },
    endDate() {
      return this.getDate('end')
    },
    onlyZero() {
      return this.active === 2
    }
  },
  created() {
  },
  onLoad(option) {
    this.dailyDate=option.dailyDate?formatDate(Number(option.dailyDate),'yyyy-MM-dd'):'';
    this.uniqueNo=option.uniqueNo;
    uni.setNavigationBarTitle({
        title: this.dailyDate+"累计已发放明细"
    });
    if(this.uniqueNo){
      this.getList()
    }else{
      this.$msg('未获取到ID');
    }
  },
  onPullDownRefresh() {
    this.pageNo = 1
    this.listData = []
    this.nomore = false
    this.getList()
  },
  onReachBottom() {
    if (this.nomore) return
    this.pageNo += 1
    this.getList()
  },
  onShow() {
  },
  methods: {
    chooseTimeTab(index) {
      this.active2 = index
      this.startTimeP = '开始时间'
      this.endTimeP = '结束时间'
    },
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    sureBtn() {
      console.log(this.active2)
      if (this.active2 !== 'no') {
        if (this.active2 === 0) {
          this.startTime = ''
          this.endTime = ''
          this.timeTitle = '全部'
        } else if (this.active2 === 1) {
          this.startTime = this.getTabMonth(0)
          this.endTime = this.getTabMonth(0)
          const aaa = this.startTime.split('-')
          this.timeTitle = aaa[0] + '年' + aaa[1] + '月'
        } else if (this.active2 === 2) {
          this.startTime = this.getTabMonth(1)
          this.endTime = this.getTabMonth(1)
          const aaa = this.startTime.split('-')
          this.timeTitle = aaa[0] + '年' + aaa[1] + '月'
        } else if (this.active2 === 3) {
          this.startTime = this.getTabMonth(3)
          this.endTime = this.getTabMonth(1)
          const aaa = this.startTime.split('-')
          const bbb = this.endTime.split('-')
          if (aaa[0] === bbb[0]) {
            this.timeTitle = aaa[0] + '年' + aaa[1] + '月~' + bbb[1] + '月'
          } else {
            this.timeTitle = aaa[0] + '年' + aaa[1] + '月-' + bbb[0] + '年' + bbb[1] + '月'
          }
        } else if (this.active2 === 4) {
          this.startTime = this.getTabMonth(6)
          this.endTime = this.getTabMonth(1)
          const aaa = this.startTime.split('-')
          const bbb = this.endTime.split('-')
          if (aaa[0] === bbb[0]) {
            this.timeTitle = aaa[0] + '年' + aaa[1] + '月~' + bbb[1] + '月'
          } else {
            this.timeTitle = aaa[0] + '年' + aaa[1] + '月-' + bbb[0] + '年' + bbb[1] + '月'
          }
        } else if (this.active2 === 5) {
          this.startTime = this.getTabMonth(12)
          this.endTime = this.getTabMonth(1)
          const aaa = this.startTime.split('-')
          const bbb = this.endTime.split('-')
          if (aaa[0] === bbb[0]) {
            this.timeTitle = aaa[0] + '年' + aaa[1] + '月~' + bbb[1] + '月'
          } else {
            this.timeTitle = aaa[0] + '年' + aaa[1] + '月-' + bbb[0] + '年' + bbb[1] + '月'
          }
        } else if (this.active2 === 'reset') {
          this.startTime = ''
          this.endTime = ''
          this.timeTitle = '全部'
        }
        this.listData = []
        this.pageNo = 1
        this.nomore = false
        this.getList()
      } else {
        if (this.startTimeP === '开始时间' && this.endTimeP !== '结束时间') {
          this.startAniPicker = true
          setTimeout(() => {
            this.startAniPicker = false
          }, 2000)
          return false
        }
        if (this.endTimeP === '结束时间' && this.startTimeP !== '开始时间') {
          this.endAniPicker = true
          setTimeout(() => {
            this.endAniPicker = false
          }, 2000)
          return false
        }
        if (this.endTimeP === '结束时间' && this.startTimeP === '开始时间') {
          this.startTime = ''
          this.endTime = ''
        } else {
          this.startTime = this.startTimeP + '-01 00:00:00'
          this.endTime = this.endTimeP + '-01 00:00:00'
          const aaa = this.startTime.split('-')
          const bbb = this.endTime.split('-')
          if (this.startTime === this.endTime) {
            this.timeTitle = aaa[0] + '年' + aaa[1] + '月'
          } else {
            if (aaa[0] === bbb[0]) {
              this.timeTitle = aaa[0] + '年' + aaa[1] + '月~' + bbb[1] + '月'
            } else {
              this.timeTitle = aaa[0] + '年' + aaa[1] + '月-' + bbb[0] + '年' + bbb[1] + '月'
            }
          }
        }
        this.listData = []
        this.pageNo = 1
        this.nomore = false
        this.getList()
      }
      this.pShow = false
    },
    resetBtn() {
      this.active2 = 'reset'
      this.startTimeP = '开始时间'
      this.endTimeP = '结束时间'
      this.startTime = ''
      this.endTime = ''
      this.timeTitle = '全部'
    },
    async getList() {
      this.totalCommission = ''
      const res = await this.$api.gainApi.bhs_commission_record({
        userId: this.$store.state.userInfo.uid,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        startTime: this.startTime,
        endTime: this.endTime,
        settleStatus: this.settleStatus,
        onlyZero: this.onlyZero,
        queryEnum:'DETAIL',//查询类型,DETAIL累计已发放明细
        balanceBusinessId:this.uniqueNo,//唯一标识
      })
      if (res.code === '000000') {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        this.listData = this.listData.concat(res.data.pageInfo.list)
        if (res.data.pageInfo.list.length < this.pageSize) {
          this.nomore = true
        }
        this.totalCommission = res.data.totalCommission
      }
    },
    toggle(index) {
      this.active = index
      this.nomore = false
      this.listData = []
      this.pageNo = 1
      if (index === 0) {
        this.settleStatus = 'TRADE_DONE_SETTLE'
      } else if (index === 1) {
        this.settleStatus = 'TRADE_INVALID'
      } else {
        this.settleStatus = 'TRADE_WAIT_PREPARE_SETTLE'
      }
      this.getList()
    },
    getTabMonth(num) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month - num
      if (month <= 0) {
        month = 12 + month
        if (month < 10) {
          month = '0' + month
        }
        year = year - 1
      } else if (month < 10) {
        month = '0' + month
      }
      return `${year}-${month}-01 00:00:00`
    },
    searchPopup() {
      this.pShow = true
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      if (type === 'start') {
        year = year - 10
      }
      month = month > 9 ? month : '0' + month
      return `${year}-${month}`
    },
    bindstartDateChange: function(e) {
      this.startTimeS = new Date(e.target.value).getTime()
      if ((this.startTimeS > this.endTimeS) && this.endTimeS !== '') {
        this.startAniPicker = true
        setTimeout(() => {
          this.startAniPicker = false
        }, 2000)
        return false
      }
      this.startTimeP = filters.parseTime(this.startTimeS, '{y}-{m}')
      this.active2 = 'no'
      // if (this.endTimeP !== '结束时间') {

      // }
    },
    bindendDateChange: function(e) {
      this.endTimeS = new Date(e.target.value).getTime()
      if ((this.startTimeS > this.endTimeS) && this.startTimeS !== '') {
        this.endAniPicker = true
        setTimeout(() => {
          this.endAniPicker = false
        }, 2000)
        return false
      }
      this.endTimeP = filters.parseTime(new Date(e.target.value).getTime(), '{y}-{m}')
      // if (this.startTimeP !== '开始时间') {

      // }
      this.active2 = 'no'
    }
  }
}
</script>
